<!DOCTYPE html>
<html>
<!--
1.针对table、select、ul、ol这些强制性的html结构的元素，可以使用is进行组件的绑定
2.this.$emit进行发布监听的时候，大小写不敏感
3.ref如果使用在组件上面，返回的一个对象
-->
<head>
	<title>组件使用的细节</title>
	<script type="text/javascript" src="./vue.js"></script>
</head>
<body>	
	<div id="app">
		<table>
			<tr ref="row" @handler-click="handlerRow" is="row"></tr>
		</table>
	</div>
	<script>
		Vue.component(
			"row" , {
				data : function() {
					return {
						content : "this is a row"
					}
				},
				template : '<tr @click="rowClick"><td>{{content}}</td></tr>',
				methods : {
					rowClick : function() {
						this.$emit('handler-click');
					}
				}
			}
		);
		var app = new Vue({
			el : '#app',
			methods : {
				handlerRow : function() {
					console.log(this.$refs.row.content);
				}
			} 
		});
	</script>
</body>
</html>